<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: header(~{::title},~{::link},~{})">
    <title th:text="'临窗旋墨-' + ${entity?.title}">临窗旋墨-文章详情</title>
    <link rel="stylesheet" th:href="@{/css/jianshu.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/css/content.css}"/>
    <link rel="stylesheet" th:href="@{/assets/lib/editor.md-master/css/editormd.preview.css}"/>
    <link rel="stylesheet" th:href="@{/css/comments.css}">
</head>
<body class="">
<!--导航-->
<!--<div th:replace="common/nav :: nav(true)"></div>-->
<div class="container-fluid">
    <div class="row">

        <div class="col-lg-10  col-sm-10 col-md-10">

            <!-- 操作信息提示的地方 -->
            <div th:unless="${entity}" class="alert alert-danger"
                 style="margin-top: 20px">
                <button data-dismiss="alert" class="close" type="button">
                    <i class="glyphicon glyphicon-remove"></i>
                </button>
                <span th:remove="tag" th:utext="不存在的文章"></span>
            </div>

            <div th:if="${entity}" class="articleContent shadow">
                <h3 class="title" th:text="${entity.title}">
                    tiltle
                </h3>
                <div class="property">
                    <span><small>文章来源</small>：<span
                            th:text="${entity.originated==1?'原创':entity.source}">原创</span></span>&nbsp;&nbsp;
                    <span><small>作者：</small><span th:text="${entity.author}"></span></span>&nbsp;&nbsp;
                    <span><small>发布时间：</small><span
                            th:text="${#dates.format(entity.createTime, 'yyyy-MM-dd')}"></span></span>&nbsp;&nbsp;
                    <span><small>阅读：</small><span th:text="${entity.readNum}">100</span></span>&nbsp;&nbsp;
                    <span><small>标签：</small><span th:text="${entity.tagNames}"></span></span>
                    <span><small>分类：</small><a class="" th:href="@{'/categories?cid=' + ${entity.categoryId}}"
                                                 target="_blank"
                                                 th:text="${entity.categoryName}">Java</a></span>
                    <span><small>专题：</small><a
                            th:href="@{'/topics?tid=' + ${entity.topicId}}" target="_blank"
                            th:text="${entity.topicName}">JAVA</a></span>
                </div>
                <div id="contentTxt" class=" markdown-body editormd-html-preview" th:utext="${entity.html}">
                </div>
            </div>

            <hr/>
            <th:block th:if="${entity}">
                <h3>发表评论</h3>
                <!--提交评论的form-->
                <div th:replace="common/comment :: commentForm"></div>

                <!--主评论列表-->
                <div th:replace="common/comment :: commentList"></div>
            </th:block>
        </div>
    </div>

    <div class="row">


    </div>


</div>

<div class="panel panel-default md-toc" th:if="${entity}">
    <div class="panel-heading">
        <h3 class="panel-title">
            <span>目录</span><a id="closeToc"><i class="glyphicon glyphicon-remove pull-right text-small"></i></a>
        </h3>
    </div>
    <div class="panel-body" id="toc" th:utext="${entity?.toc}">

    </div>
</div>
<div class="bottom-toolbar">
    <a class="btn btn-lg btn-link" data-toggle="tooltip"
       data-placement="top" title="目录">
        <i class="glyphicon glyphicon-th-list"></i>
    </a>
</div>
<!-- 引入通用js-->
<div th:replace="common/footer :: footer"></div>
<div th:replace="common/footer-md :: footer-md"></div>

<script th:inline="javascript">
    /*<![CDATA[*/

    var user =/*[[${session.principal}]]*/

        /*]]>*/

        function toc() {
            let $toc = $(".md-toc");

            $toc.css("height", $toc.outerHeight()).css("width", $toc.outerWidth());
            $(".bottom-toolbar").find(".btn").tooltip({"placement": "top"}).on("click", function () {
                $($toc).toggle("slow");
            });
            $("#closeToc", $toc).on("click", function () {
                $($toc).toggle("fast");
            });
            $toc.draggable({});
        }

    toc();
</script>
<script th:src="@{/js/comment.js}"></script>
</body>
</html>
